<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>支付宝小程序路径生成器</title>
    <style>
        * { margin: 0; padding: 0; }
        .f1 { font-size: 1.5rem; }
        .container { padding: 0.625rem; }
        .flex { display: flex; }
        .flex-1 { flex: 1; }
        label { min-width: 4rem; }
        .field {
            margin-top: 0.625rem;
            font-size: 0.8rem;
        }

        .field::first-child {
            margin-top: 0;
        }

        .mt1 { margin-top: 1rem; }

        input[type="text"] {
            height: 1.8rem;
        }

        #output { word-break: break-all; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="f1">支付宝小程序路径生成器</h1>
        <div class="field flex">
            <label for="appid">appId: </label>
            <input type="text" id="appid" class="flex-1" />
        </div>
        <div class="field flex">
            <label for="path">指定路径: </label>
            <input type="text" id="path" class="flex-1" />
        </div>
        <div class="field flex">
            <label for="query">启动参数: </label>
            <input type="text" id="query" class="flex-1" />
        </div>
        <div class="field">
            <button id="submit">生成路径</button>
        </div>
        <div id="output" class="mt1" contenteditable="true"></div>
    </div>

    <script>
        init();

        function init() {
            readFromCache();
            $('#submit').addEventListener('click', onClick);
        }

        function readFromCache() {
            $('#appid').value = getCache('appid');
            $('#path').value = getCache('path');
            $('#query').value = getCache('query');
        }

        function getCache(key) {
            if (!key) return '';
            return localStorage.getItem(key) || '';
        }

        function setCache(key, str) {
            if (!key) return;
            localStorage.setItem(key, str);
        }

        function onClick() {
            const obj = getRawData();
            if (!checkValid(obj)) return;
            saveCache(obj);

            const result = encodePath(obj);
            updateResult(result);
        }

        function saveCache(obj) {
            const {
                appid,
                path,
                query,
            } = obj;

            setCache('appid', appid);
            setCache('path', path);
            setCache('query', query);
        }

        function checkValid(obj) {
            if (!obj) return false;
            const {
                appid,
            } = obj;

            if (!appid) {
                alert('请输入 appid!');
                return false;
            }

            return true;
        }

        function getRawData() {
            return {
                appid: $('#appid').value,
                path: $('#path').value,
                query: $('#query').value,
            }
        }

        function encodePath(obj) {
            let scheme = `alipays://platformapi/startapp?appId=${obj.appid}`;

            if (obj.path) {
                scheme += `&page=${obj.path}`;
            }

            if (obj.query) {
                scheme += `&query=${encodeURIComponent(obj.query)}`;
            }

            return {
                url: `https://ds.alipay.com/?scheme=${encodeURIComponent(scheme)}`,
                scheme: scheme,
            }
        }

        function updateResult(obj) {
            const { url, scheme } = obj;
            $('#output').innerHTML = `${url}`;
        }

        function $(el) {
            return document.querySelector(el);
        }
    </script>
</body>
</html>
